import React, { Component } from "react";
import { Modal } from "antd-mobile";
import choose from "@images/yhLife/icon/icon-checked.png";
import nochoose from "@images/icon/icon_hui_check.png";
import "./PayWayModal.scss";
class PayWayModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			paytoolsData: {} // 支付方式数据
		};
	}
	onClose = () => {
		this.props.onClose && this.props.onClose();
	};
	goToChoose = item => {
		const { transAmount = 0 } = this.props;
		// 不够支付
		if (Number(transAmount) > Number(item.availableAmt)) {
			return;
		}
		this.props.onChange && this.props.onChange(item);
	};

	render() {
		const {
			visible,
			paytoolsData = {},
			nowPaytool,
			transAmount = 0
		} = this.props;
		const { payToolBos = [] } = paytoolsData;
		return (
			<Modal
				className="pay-way-modal"
				popup
				visible={visible}
				closable={true}
				onClose={this.onClose}
				animationType="slide-up"
				maskClosable={false}
				transparent
			>
				<div className="cont">
					<div className="tit-way">请选择支付方式</div>
					<div className="itemCont">
						{payToolBos.map(item => {
							return (
								<div
									key={item.payToolName}
									className={
										Number(transAmount) > Number(item.availableAmt)
											? "item op5"
											: "item"
									}
									onClick={() => this.goToChoose(item)}
								>
									<div className="img">
										<img src={item.logoAddr} />
									</div>
									<div className="center">
										<div className="name">{item.payToolName}</div>
										<div className="money">（可用: ￥{item.availableAmt}）</div>
									</div>
									<img
										src={
											nowPaytool.payToolCode == item.payToolCode
												? choose
												: nochoose
										}
										alt=""
										className="choose"
									/>
								</div>
							);
						})}
					</div>
				</div>
			</Modal>
		);
	}
}

export default PayWayModal;
